<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        img {
            vertical-align: top;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        /* 小广告 */
        .adver-wrapper {
            width: 300px;
            /* height: 400px; */
            background-color: grey;
            position: fixed;
            right: 5px;
            bottom: 5px;
        }

        .adver-header {
            line-height: 32px;
            position: relative;
        }

        .adver-header .adver-tips {
            font-size: 12px;
            text-indent: 13px;
        }

        .adver-header .adver-close {
            position: absolute;
            right: 5px;
            top: 0;
        }

        .adver-main img {
            width: 100%;
        }

        /* 时钟 */
        #clock-box {
            /* 父元素宽度依靠子内容撑开 */
            /* display:linne-block  -> 改变元素性质 */
            width: fit-content;
            margin: 0 auto;
            text-align: center;
            padding: 10px;
        }

        #clock-box #clock-time {
            font-size: 40px;
            line-height: 50px;
            font-family: "clockIcon";
        }

        @font-face {
            font-family: "clockIcon";
            src: url('../font/clockicons.woff2');
        }
    </style>
</head>

<body>
    <!-- vue的根实例(所有组件的父(代)组件) -->
    <div id="app">
        <h3>组件prop测试</h3>

        <div>
            <p>
                {{count}}
            </p>
            <button @click="count++">点击</button>
        </div>
        <!-- <div ASD="asd"></div> -->

        <!-- 给组件传入动态属性 => v-bind:参数="指令值"  指令的值一般是javascript表达式  -->
        <prop-test id="demo" class="two" :class="{active:count % 2 == 0}" title="hello" style="background:blue"
            :str="'string'" :num="10.5" :bool="true" :a="null" :b="undefined" :arr="[1,2,3]" :obj="{a:1,b:2}"
            :data-id="0"></prop-test>
    </div>
</body>

<script>

    // 组件传参 
    // 1. 传入静态属性 count="10", 一般会作为组件中的初始值 => (由于不能直接修改传入的数据) =>  根据传入的值得到一个新值 => 绑定到data上
    // 2. 传入动态属性 :count="count", 如果父组件中的数据发送改变,子组件接收的数据也会改变  => (由于不能直接修改传入的数据)  => 根据传入的值的到一个新值(计算属性)


    // 注意: 
    // 1. 父组件向子组件传递动态属性时, 如果父组件中的数据(传入的数据)发生改变,子组件接收的数据也会改变 => 引发子组件视图更新 (子组件 会响应父组件 的数据更新)
    // 2. 父组件向子组件传递静态属性,属性值只能是字符串类型 => 子组件接收的数据也都是字符串类型
    //    父组件向子组件传递动态属性,属性值的类型可以是(number boolean string null undefined array object)=> 子组件接收的数据也都是对应的类型
    // 3. 父组件向子组件传递属性时,复合属性名建议使用中划线命名法(data-id), 子组件接收数据之后会默认将其转化为 驼峰式命名法 


    // 父组件向子组件传递属性的过程中,有一些被子组件props接收 => 作为数据使用 ,还有一部分没有被props接收 => 它们应该何去何从?
    // 答: 没有被接收的属性会透过组件传递子组件的根元素上(被根元素继承),作为根元素的html属性  => 如果根元素中存在同名属性,默认用传入的属性覆盖原本的,但是class和style除外 => 会组合形成最终的class名和样式    

    // 如果不想将传递的属性设置给组件的根元素? 
    // 1. 设置 inheritAttrs: false  (class和style还是会透传(继承))
    // 2. 通过组件的this.attrs => 可以获取所有透传的属性(对象) => 绑定到想要的元素的位置

    // this.$props => 组件中实例化对象的属性 (存储所有传入的数据-> 被组件props接收的)
    // this.$attrs => 组件中实例化对象的属性 (存储所有传入的数据-> 没有被组件props接收的(被继承的/透传的))

    Vue.component("prop-test", {
        // 如果不想继承组件中传递的属性 
        inheritAttrs: false,

        // 如果组件内要接收参数,将所有的参数提取出来 放到props
        // 1. 子组件会先接收父组件传递的数据 再进行初始化操作
        // 2. 子组件接收的数据也会挂载在子组件的实例化对象上 this.count  this.src

        // 写法1:
        // 简易验证:传入一个对象,对象的键名是要求接收的参数名,键值(构造函数)是要求传入的参数的类型
        props: {
            str: String,
            num: Number,
            bool: Boolean,
            // a: null,
            // b: undefined,
            // arr: Array,
            // obj: Object,
            // dataId: Number,
        },
        data() {
            return {

            }
        },
        template: `<div>
                <span :id="$attrs.id">111111</span>
                <span :title="$attrs.title">222222</span>
                <span v-bind="$attrs">333333</span>
            </div>`,
        mounted() {
            console.log("组件加载完毕", this);
            // this.$props => 组件中实例化对象的属性 (存储所有传入的数据-> 被组件props接收的)
            // this.$attrs => 组件中实例化对象的属性 (存储所有传入的数据-> 没有被组件props接收的)
            // console.log("组件加载完毕", this.$props);
            console.log("组件加载完毕", this.$attrs);
        }
    })

    var vm = new Vue({
        el: "#app",
        data: {
            msg: "",
            count: 1,
        }
    })







</script>

</html>